<template>
    <div class="carousel">
        <div class="carousel-items" :style="{ transform: `translateX(-${currentIndex * 100}%)` }">
            <div v-for="(image, index) in images" :key="index" class="carousel-item">
                <img :src="image" alt="carousel-image" />
            </div>
        </div>
        <div class="dots">
            <span v-for="(slide, index) in images" :key="index" v-bind:class="{ active: index === currentIndex }"
                class="dot" @click="goToSlide(index)"></span>
        </div>
        <span class="carousel-prev" @click="prevItem">&lt;</span>
        <span class="carousel-next" @click="nextItem">&gt;</span>
    </div>
</template>
<script>
export default {
    data() {
        return {
            images: [
                'https://y.qq.com/music/common/upload/MUSIC_FOCUS/4642848.jpg?max_age=2592000',
                'https://y.qq.com/music/common/upload/MUSIC_FOCUS/4638975.jpg?max_age=2592000',
                'https://y.qq.com/music/common/upload/MUSIC_FOCUS/4643118.jpg?max_age=2592000',
                'https://y.qq.com/music/common/upload/MUSIC_FOCUS/4641771.jpg?max_age=2592000',
                'https://y.qq.com/music/common/upload/MUSIC_FOCUS/4641406.jpg?max_age=2592000'
            ],
            currentIndex: 0,
            timer: null
        };
    },
    mounted() {
        this.startCarousel();
    },
    methods: {
        startCarousel() {
            this.timer = setInterval(() => {
                this.nextItem();
            }, 1500);
        },
        stopCarousel() {
            clearInterval(this.timer);
        },
        prevItem() {
            this.currentIndex = (this.currentIndex === 0) ? this.images.length - 1 : this.currentIndex - 1;
        },
        nextItem() {
            this.currentIndex = (this.currentIndex === this.images.length - 1) ? 0 : this.currentIndex + 1;
        },
        goToSlide(index) {
            this.currentIndex = index;
        },
    }
}
</script>
<style>
* {
    margin: 0;
    padding: 0;
}

.carousel {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.carousel-items {
    display: flex;
    transition: transform 0.5s;
}

.carousel-item {
    flex: 0 0 100%;
}

.carousel-prev,
.carousel-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 30px;
    cursor: pointer;
    padding: 0 12px;
}

.carousel-prev {
    left: 10px;
}

.carousel-next {
    right: 10px;
}

.dots {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

.dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: gray;
    margin: 0 5px;
    cursor: pointer;
}

.dot.active {
    background-color: black;
}
</style> 
